<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="">
    <div class="container1">
      <el-card class="mb-6">
        <span class="text-lg font-medium mb-3">模块简介：</span>
        <span class="text-gray-600 leading-relaxed mt-8">
          自动下载全球最佳台风路径、台风编号、台风名称、最大风速、最大风速半径观测数据，数据时间分辨率3小时，时间跨度40年（1985-2024）。
        </span>
      </el-card>
      <el-card class="mb-6">
        <div class="flex items-center justify-between">
          <span class="text-lg font-medium">自动下载程序</span>
          <div class="flex items-center space-x-4">
            <el-button
              :type="downloadStatus === 'running' ? 'danger' : 'primary'"
              class="!rounded-button whitespace-nowrap"
              size="small"
              @click="toggleDownload"
            >
              <i
                class="el-icon-video-play"
                v-if="downloadStatus !== 'running'"
              ></i>
              <i class="el-icon-video-pause" v-else></i>
              {{ downloadStatus === "running" ? "停止执行" : "开始执行" }}
            </el-button>
          </div>
        </div>
      </el-card>
      <el-card class="h-full">
        <el-tabs v-model="activeTab">
          <el-tab-pane
            label="要素图"
            name="chart"
            class="flex-1 flex flex-col h-full"
          >
            <div class="flex items-center justify-between mb-6">
              <div class="items-center flex flex-row">
                <span class="text-gray-600 flex-shrink-0">台风编号：</span>

                <el-input
                  v-model="typhoonNum"
                  placeholder="如：202401"
                  size="small"
                ></el-input>
              </div>
              <div class="flex items-center space-x-4">
                <el-button type="primary" @click="handleSearch" size="small">
                  <i class="el-icon-search"></i>查询
                </el-button>
                <el-button @click="handleReset" size="small">
                  <i class="el-icon-refresh"></i>重置
                </el-button>
              </div>
            </div>
            <!-- 图片预览区域 -->
            <div
              class="w-full aspect-[16/9] bg-gray-100 rounded-lg flex items-center justify-center mt-10 p-10"
              style="height: 60vh"
            >
              <div
                v-if="previewImage"
                class="w-full h-full flex items-center justify-center"
              >
                <img :src="previewImage" class="h-full" />
              </div>
              <div v-else class="text-center">
                <i class="el-icon-picture text-gray-400 text-6xl mb-4"></i>
                <p class="text-gray-500">暂无数据</p>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="数据查看" name="download" class="flex-1">
            <!-- 文件列表 -->
            <div class="h-full overflow-y-auto pr-2">
              <el-table :data="files" style="width: 100%" max-height="60vh">
                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column label="文件名" prop="name">
                  <template slot-scope="scope">
                    <div class="flex items-center">
                      <i class="el-icon-document mr-2"></i>
                      <span>{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button type="text">下载</el-button>
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      typhoonNum: "",
      total: 50,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      activeTab: "chart",
      downloadStatus: "stopped",
      previewImage:
        "https://n.sinaimg.cn/sinakd20230724s/540/w932h1208/20230724/7bdb-e74441c4b7165abd4090c99a1d0d45c1.png",

      selectedDate: new Date(),
      timeOptions: Array.from({ length: 24 }, (_, i) =>
        i.toString().padStart(2, "0")
      ),

      files: Array.from({ length: 50 }, (_, index) => ({
        name: `ERA5_WindSpeed_${2023 - Math.floor(index / 12)}_${(
          (index % 12) +
          1
        )
          .toString()
          .padStart(2, "0")}.nc`,
      })),
    };
  },
  methods: {
    toggleDownload() {
      this.downloadStatus =
        this.downloadStatus === "running" ? "stopped" : "running";
    },
    handleSearch() {
      console.log("Search clicked");
    },
    handleReset() {},
  },
};
</script>

<style scoped>
.container1 {
  height: calc(100vh - 70px);
}

.el-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
